{% extends 'base.html' %}
{% load staticfiles %}

{% block css %}
    {{ block.super }}


    {{ form.media }}
{% endblock %}

{% block header %}
    <a href="javascript:;" class="active">调试规则</a>
{% endblock %}

{% block action %}
    <a class="roll-nav roll-right extra-right-btns pull-right" href="{% url 'rule:list' %}">
        <i class="fa fa-reply"></i>
        返回
    </a>
{% endblock %}


{% block main %}
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox extra-float-margins">
                    <div class="extra-box-content">
                        <form method="post" class="form-horizontal" id="menu_create_form" action="{{ request.get_full_path }}">
                            {% csrf_token %}
                            <div class="form-group">
                                <label class="col-sm-2 control-label">规则名称</label>
                                <div class="col-sm-9">
                                    {{ form.rule }}
                                    <span id="id-strategy-error" class="help-block" style="color:darkred"></span>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">请求体</label>
                                <div class="col-sm-9">
                                    {{ form.req_body }}
                                    <span id="id-req_body-error" class="help-block" style="color:darkred"></span>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-4 col-sm-offset-2">
                                     <button class="btn btn-primary" type="submit">测试</button>
                                </div>
                            </div>
                        </form>
                    </div>

                    <div class="extra-box-content">
                        <div id="resultArea"></div>
                    </div>

                </div>
            </div>
        </div>
    </div>
{% endblock %}


{% block js %}
{{ block.super }}


<script>
    $(function () {
    $("body").on("submit", '#menu_create_form', function (e) {
        $("#id-req_body-error").html("");
        $("#id-title-error").html("");
        $("#resultArea").html("");

        e.preventDefault();
        var form = $(this);
        var _this = $(this);
        var uri = _this.attr('action');
        var params = form.serializeArray();

        _this.addClass("posting");
        $.ajax({
            url: uri,
            data: params,
            dataType: "json",
            type: "POST",
            success: function (resp) {
                if (resp.state) {
                    var data = JSON.stringify(resp.data, null, 4);
                    $("#resultArea").html(data);
                } else {
                    _this.removeClass("posting");
                    var error = resp.error;
                    for (var name in error) {
                        $("#id-" + name +"-error").html(error[name][0]);
                    }
                }
            },
            error: function (err) {
                if (err.statusText !== 'abort') {
                    _this.removeClass("posting");
                    swal({
                        title: "哎呀，出错了",
                        type: "error",
                        confirmButtonColor:"#1ab394"
                    });
                }
            }
        })
    });
});

    function get_data_example() {
        var options=$("#id_rule option:selected");
        uuid = options.val();
        $.ajax({
            url: "{% url 'rule:data' %}",
            data: {
                "uuid":uuid,
                'csrfmiddlewaretoken': '{{ csrf_token }}'
            },
            dataType: "json",
            type: "POST",
            success: function(resp) {
                if (resp.state) {
                    var req_body = JSON.stringify(resp.req_body, null, 4);
                    $("#id_req_body").val(req_body);
                }
            },
        })
    }
</script>

<script>
    $(function () {
        $('select.form-control').searchableSelect();
    });
</script>
{% endblock %}
